<template>
  <div style="width: 100%; height: 100%; overflow: auto">
    <div class="home1">
      <div class="home1-1">
        <el-avatar
          :size="90"
          src="https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif?imageView2/1/w/80/h/80"
        />
        <div class="home1-1-1">
          <p class="home1-1-2">
            {{
              new Date().getHours() > 6 && new Date().getHours() < 12
                ? "早上好"
                : new Date().getHours() >= 12 && new Date().getHours() <= 13
                ? "中午好"
                : new Date().getHours() > 13 && new Date().getHours() < 19
                ? "下午好"
                : "晚上好"
            }},系统管理员！
          </p>
          <p class="home1-1-3">今日天气晴朗，气温在15℃至25℃之间，东南风。</p>
        </div>
      </div>
      <div class="home1-2">
        <div class="home1-2-1">
          <div class="home1-2-2">
            <img src="@/components/短信.png" alt="" />
            <span>消息</span>
          </div>
          <p class="home1-2-3">{{}}66</p>
        </div>
        <div class="home1-2-1">
          <div class="home1-2-2">
            <img src="@/components/时钟.png" alt="" />
            <span>代办</span>
          </div>
          <p class="home1-2-3">{{}}50/100</p>
        </div>
        <div class="home1-2-1">
          <div class="home1-2-2">
            <img src="@/components/我的书架.png" alt="" />
            <span>项目</span>
          </div>
          <p class="home1-2-3">{{}}20</p>
        </div>
      </div>
    </div>
    <!--  -->
    <el-row :gutter="9" style="width: 100%">
      <el-col :xs="24" :sm="12" :lg="6" style="margin-bottom: 1px">
        <div class="grid-content ep-bg-purple">
          <el-card class="home2-1">
            <template #header>
              <div class="card-header">
                <span class="home2-3">访客数</span>
                <span class="home2-2">日</span>
              </div>
            </template>
            <div class="home2-4 card-header">
              <p>123{{}}</p>
              <img src="@/components/头像.png" alt="" />
            </div>
            <div class="home2-5 card-header">
              <p>总访客数</p>
              <p>456789{{}}</p>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="grid-content ep-bg-purple-light">
          <el-card class="home2-1">
            <template #header>
              <div class="card-header">
                <span class="home2-3">IP数</span>
                <span class="home2-2">日</span>
              </div>
            </template>
            <div class="home2-4 card-header">
              <p>123{{}}</p>
              <img src="@/components/ip地址.png" alt="" />
            </div>
            <div class="home2-5 card-header">
              <p>总IP数</p>
              <p>456789{{}}</p>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="grid-content ep-bg-purple">
          <el-card class="home2-1">
            <template #header>
              <div class="card-header">
                <span class="home2-3">销售额</span>
                <span class="home2-6">月</span>
              </div>
            </template>
            <div class="home2-4 card-header">
              <p>123{{}}</p>
              <img src="@/components/ip地址.png" alt="" />
            </div>
            <div class="home2-5 card-header">
              <p>总销售额</p>
              <p>456789{{}}</p>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="grid-content ep-bg-purple-light">
          <el-card class="home2-1">
            <template #header>
              <div class="card-header">
                <span class="home2-3">订单量</span>
                <span class="home2-7">季</span>
              </div>
            </template>
            <div class="home2-4 card-header">
              <p>123{{}}</p>
              <img src="@/components/发布商情数量.png" alt="" />
            </div>
            <div class="home2-5 card-header">
              <p>总订单量</p>
              <p>456789{{}}</p>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <!--  -->
    <el-row :gutter="9" style="width: 100%; margin-top: 15px">
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 8px">
        <div class="grid-content ep-bg-purple">
          <!-- <BarChart id="barChart" height="400px" width="300px" /> -->
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="grid-content ep-bg-purple-light">123</div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="grid-content ep-bg-purple">123</div>
      </el-col>
    </el-row>
    <!--  -->
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const times = ref();
</script>

<style scoped>
.home1 {
  padding: 20px;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #e4dcdc;
  margin-bottom: 15px;
}
.home1-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.home1-1-1 {
  margin-left: 20px;
  height: 100%;
}
.home1-1-1 p {
  padding: 10px 0;
}
.home1-1-2 {
  font-size: 20px;
}
.home1-1-3 {
  color: #b5b5b5;
}
.home1-2 {
  display: flex;
  align-items: center;
  height: 100%;
}
.home1-2-1 {
  padding: 0 9px;
}
.home1-2-2 {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.home1-2-2 img {
  width: 30px;
  height: 30px;
}
.home1-2-2 span {
  font-size: 22px;
}
.home1-2-3 {
  text-align: center;
  font-size: 20px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: #fff;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home2-2 {
  /* font-size: 17px; */
  border: 1px solid #62c173;
  background-color: #aedfb7;
  border-radius: 5px;
  padding: 2px 11px;
  color: #62c173;
}
.home2-3 {
  font-size: 20px;
  color: #b5b5b5;
}
.home2-4 {
  margin-top: 30px;
}
.home2-4 p {
  font-size: 20px;
}
.home2-4 img {
  width: 40px;
  height: 40px;
}
.home2-5 {
  color: #b5b5b5;
  font-size: 20px;
  margin-top: 20px;
}
.home2-6 {
  /* font-size: 17px; */
  border: 1px solid #2574db;
  background-color: #9ec3f3;
  border-radius: 5px;
  padding: 2px 11px;
  color: #2574db;
}
.home2-7 {
  /* font-size: 17px; */
  border: 1px solid #fe3895;
  background-color: #f9a2ca;
  border-radius: 5px;
  padding: 2px 11px;
  color: #fe3895;
}
</style>